<template>
  <div class="centered-container">
    <div class="todo-container">
      <h1>To Do List</h1>
      <div class="input-section">
        <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新任务..." class="todo-input" />
        <button @click="addTodo" class="add-button">添加</button>
      </div>

      <div class="filters">
        <button @click="filter = 'all'" :class="{ active: filter === 'all' }">
          全部
        </button>
        <button @click="filter = 'active'" :class="{ active: filter === 'active' }">
          未完成
        </button>
        <button @click="filter = 'completed'" :class="{ active: filter === 'completed' }">
          已完成
        </button>
      </div>

      <ul class="todo-list">
        <TodoItem v-for="todo in filteredTodos" :key="todo.id" :todo="todo" @toggle-complete="toggleComplete"
          @delete-todo="deleteTodo" @edit-todo="editTodo" />
      </ul>

      <div class="stats">
        <span>剩余 {{ activeTodoCount }} 项</span>
        <button v-if="completedTodoCount > 0" @click="clearCompleted" class="clear-button">
          清除已完成
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import TodoItem from './TodoItem.vue'
import { ref, computed, onMounted, watch } from 'vue'

interface Todo {
  id: number
  text: string
  completed: boolean
}

const todos = ref<Todo[]>([])
const newTodo = ref('')
const filter = ref<'all' | 'active' | 'completed'>('all')

// 从本地存储加载 todos
onMounted(() => {
  const savedTodos = localStorage.getItem('todos')
  if (savedTodos) {
    todos.value = JSON.parse(savedTodos)
  }
})

// 监视 todos 变化并保存到本地存储
watch(todos, (newTodos) => {
  localStorage.setItem('todos', JSON.stringify(newTodos))
}, { deep: true })

const activeTodoCount = computed(() => {
  return todos.value.filter(todo => !todo.completed).length
})

const completedTodoCount = computed(() => {
  return todos.value.filter(todo => todo.completed).length
})

const filteredTodos = computed(() => {
  switch (filter.value) {
    case 'active':
      return todos.value.filter(todo => !todo.completed)
    case 'completed':
      return todos.value.filter(todo => todo.completed)
    default:
      return todos.value
  }
})

const addTodo = () => {
  if (newTodo.value.trim() === '') return

  todos.value.push({
    id: Date.now(),
    text: newTodo.value.trim(),
    completed: false
  })

  newTodo.value = ''
}

const toggleComplete = (id: number) => {
  const todo = todos.value.find(todo => todo.id === id)
  if (todo) {
    todo.completed = !todo.completed
  }
}

const deleteTodo = (id: number) => {
  todos.value = todos.value.filter(todo => todo.id !== id)
}

const editTodo = (id: number, newText: string) => {
  const todo = todos.value.find(todo => todo.id === id)
  if (todo) {
    todo.text = newText
  }
}

const clearCompleted = () => {
  todos.value = todos.value.filter(todo => !todo.completed)
}
</script>

<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
}

.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.todo-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  max-width: 600px;
  width: 100%;
}

.input-section {
  display: flex;
  margin-bottom: 20px;
}

.todo-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  outline: none;
}

.todo-input:focus {
  border-color: #42b983;
}

.add-button {
  padding: 10px 20px;
  margin-left: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.add-button:hover {
  background-color: #3aa876;
}

.filters {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.filters button {
  padding: 10px 20px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  color: #232323;
  font-size: 16px; /* 增大字体大小 */
  transition: all 0.3s;
}

.filters button.active {
  border-color: #42b983;
  color: #42b983;
}

.stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.clear-button {
  padding: 5px 10px;
  background-color: #ff4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.clear-button:hover {
  background-color: #cc0000;
}


.filter-button {
  padding: 8px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 14px;
  color: #555;
}

.filter-button.active {
  border-bottom-color: #42b983;
  color: #42b983;
  font-weight: bold;
}

.todo-list {
  list-style: none;
  margin-bottom: 20px;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.todo-checkbox {
  margin-right: 12px;
  width: 18px;
  height: 18px;
  accent-color: #42b983;
}

.todo-text {
  flex: 1;
  font-size: 16px;
}

.todo-text.completed {
  text-decoration: line-through;
  color: #999;
}

.todo-actions {
  display: flex;
  gap: 8px;
}

.edit-button {
  padding: 6px 12px;
  background: #f0f0f0;
  color: #555;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.delete-button {
  padding: 6px 12px;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #eee;
  font-size: 14px;
  color: #777;
}

.clear-button {
  background: none;
  border: none;
  color: #777;
  cursor: pointer;
  font-size: 14px;
}

.clear-button:hover {
  color: #42b983;
}
</style>